(() => {
    const cols = document.querySelectorAll('.gd-collapse-item')
    cols.forEach(col => {
        const title = col.querySelector('.gd-collapse-item__title')
        title.addEventListener('click', e => {
            let affix = title.querySelector('.gd-collapse-item__affix .iconfont')
            let wrap = col.querySelector('.gd-collapse-item__wrap')
            wrap.classList.add('gd-collapse-transition')
            const isCollapse = col.classList.contains('is-collapse')
            if(isCollapse) {
                wrap.style.paddingTop = 0
                wrap.style.paddingBottom = 0
                wrap.style.height = 0
            } else {
                col.classList.add('is-collapse')
                affix.className = 'iconfont iconchevron-down-16px'
                setTimeout(() => {
                    wrap.removeAttribute('style')
                }, 0)
            }
            setTimeout(() => {
                if(isCollapse) {
                    col.classList.remove('is-collapse')
                    affix.className = 'iconfont iconchevron-up-16px'
                    wrap.classList.remove('gd-collapse-transition')
                }
            }, 300)
        })
    })
})()